/**
 * 功能描述: 基础滑动选择器样式表
 * @author 崔孝楠
 * @date 2022/9/21 13:47
 * @version 1.0
 */
@import '../../style/index';
// 滑动选择器布局
@mixin slider--layout {
  position: relative;
  height: 12px;
  margin: 10px 6px 10px;
  padding: 4px 0;
}
// 进度条布局
@mixin slider-rail--layout {
  position: absolute;
  width: 100%;
  height: 4px;
}
// 激活布局
@mixin slider-track--layout {
  position: absolute;
  height: 4px;
}
// 滑动按钮布局
@mixin slider-handle--layout {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-top: -5px;
}
// 间隔点布局
@mixin slider-dot--layout {
  position: absolute;
  top: -2px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
}
// 间隔点容器布局
@mixin slider-step--layout {
  position: absolute;
  width: 100%;
  height: 4px;
}
// 间隔点子元素布局
@mixin slider-dot-child--layout {
  margin-left: -4px;
}
// 滑动选择器样式
@include b(slider) {
  box-sizing: border-box;
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  line-height: $line-height-base;
  list-style: none;
  font-feature-settings: 'tnum';
  cursor: pointer;
  touch-action: none;
  @include slider--layout;
  // 悬浮样式
  &:hover {
    // 进度条
    @include b(slider-rail) {
      background-color: #e1e1e1;
    }
    // 激活部分
    @include b(slider-track) {
      background-color: $color-primary-light-2;
    }
    // 拖拽按钮
    .#{$namespace}-slider-handle {
      border-color: $color-primary-light-2;
    }
  }

}
// 进度条样式
@include b(slider-rail) {
  background-color: $background-color-base;
  border-radius: $border-radius-small;
  transition: background-color 0.3s;
  @include slider-rail--layout;
}
// 激活部分样式
@include b(slider-track) {
  background-color: $color-primary-light-4;
  border-radius: $border-radius-small;
  transition: background-color 0.3s;
  @include slider-track--layout;
}
// 滑动按钮样式
@include b(slider-handle) {
  background-color: $color-white;
  border: solid 2px $color-primary-light-4;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  @include slider-handle--layout;
  // 悬浮样式
  &:hover {
    border-color: $color-primary;
  }
  // 聚焦样式
  &-focused {
    border-color: $color-primary;
    outline: none;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

}
// 间隔点容器样式
@include b(slider-step) {
  background: transparent;
  @include slider-step--layout;
}
// 间隔点样式
@include b(slider-dot) {
  background-color: $color-white;
  border: 2px solid #f0f0f0;
  border-radius: 50%;
  cursor: pointer;
  @include slider-dot--layout;
  // 第一个和最后一个子元素布局
  &:first-child, &:last-child {
    @include slider-dot-child--layout;
  }
  // 激活样式
  &-active {
    border-color: $color-primary-light-4;
  }
}
// 选择器禁用样式
@include b(slider-disabled) {
  cursor: not-allowed;
  // 进度条
  @include b(slider-rail) {
    background-color: $background-color-base !important;
  }
  // 激活部分
  @include b(slider-track) {
    background-color: $font-color-disabled-base !important;
  }
  // 拖拽按钮和间隔点样式
  .#{$namespace}-slider-handle,
  .#{$namespace}-slider-dot {
    background-color: $color-white;
    border-color: $font-color-disabled-base !important;
    box-shadow: none;
    cursor: not-allowed;
  }
}
